import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
import ToolbarSubItem from "@/components/toolbar/ToolbarSubItem.vue";
import { i18n } from "@/locales";
import type { Editor, Range } from "@/tiptap";
import type { ExtensionOptions } from "@/types";
import {
  ListItem,
  BulletList as TiptapBulletList,
} from "@tiptap/extension-list";
import { markRaw } from "vue";
import MdiFormatListBulleted from "~icons/mdi/format-list-bulleted";
import MdiFormatListNumbered from "~icons/mdi/format-list-numbered";
import MdiFormatListCheckbox from "~icons/mdi/format-list-checkbox";

const iconComponent = {
  bulletList: MdiFormatListBulleted,
  orderedList: MdiFormatListNumbered,
  taskList: MdiFormatListCheckbox,
};

const getIcon = (editor: Editor) => {
  let icon = MdiFormatListBulleted;
  Object.entries(iconComponent).forEach(([key, value]) => {
    if (editor.isActive(key)) {
      icon = value;
      return;
    }
  });
  return icon;
};

const BulletList = TiptapBulletList.extend<ExtensionOptions>({
  addOptions() {
    return {
      ...this.parent?.(),
      getToolbarItems({ editor }: { editor: Editor }) {
        return {
          priority: 130,
          component: markRaw(ToolbarItem),
          props: {
            editor,
            isActive: false,
            icon: markRaw(getIcon(editor)),
            title: i18n.global.t("editor.common.list"),
          },
          children: [
            {
              priority: 0,
              component: markRaw(ToolbarSubItem),
              props: {
                editor,
                isActive: editor.isActive("bulletList"),
                icon: markRaw(MdiFormatListBulleted),
                title: i18n.global.t("editor.common.bullet_list"),
                action: () => editor.chain().focus().toggleBulletList().run(),
              },
            },
            {
              priority: 10,
              component: markRaw(ToolbarSubItem),
              props: {
                editor,
                isActive: editor.isActive("orderedList"),
                icon: markRaw(MdiFormatListNumbered),
                title: i18n.global.t("editor.common.ordered_list"),
                action: () => editor.chain().focus().toggleOrderedList().run(),
              },
            },
            {
              priority: 20,
              component: markRaw(ToolbarSubItem),
              props: {
                editor,
                isActive: editor.isActive("taskList"),
                icon: markRaw(MdiFormatListCheckbox),
                title: i18n.global.t("editor.common.task_list"),
                action: () => editor.chain().focus().toggleTaskList().run(),
              },
            },
          ],
        };
      },
      getCommandMenuItems() {
        return {
          priority: 110,
          icon: markRaw(MdiFormatListBulleted),
          title: "editor.common.bullet_list",
          keywords: ["bulletlist", "wuxuliebiao"],
          command: ({ editor, range }: { editor: Editor; range: Range }) => {
            editor.chain().focus().deleteRange(range).toggleBulletList().run();
          },
        };
      },
      getDraggable() {
        return {
          getRenderContainer({ dom }) {
            let container = dom;
            while (container && !(container.tagName === "LI")) {
              container = container.parentElement as HTMLElement;
            }
            return {
              el: container,
              dragDomOffset: {
                x: -12,
              },
            };
          },
        };
      },
    };
  },
  addExtensions() {
    return [ListItem];
  },
});

export default BulletList;
